<template>
  <div class="box">
  <div class="loginout">
    <el-button type="info" plain @click="golast" class="button">返回</el-button>
    <div class="loginin">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.name">
            <i slot="prefix" class="el-input__icon el-icon-user"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="formLabelAlign.phone">
            <i slot="prefix" class="el-input__icon el-icon-phone"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formLabelAlign.email">
            <i slot="prefix" class="el-input__icon el-icon-message"></i>
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formLabelAlign.password" show-password>
            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
          </el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" plain>注册</el-button>
      <br>
      <br>
      <template>
        <el-radio v-model="radio" label="1">用户</el-radio>
      </template>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  name: "register-box",
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '1',
        phone: '2',
        email: '3',
        password:'4'
      },
      radio: '1',
    }
  },
  methods:{
    golast(){
      this.$router.push("/login-box");
    }
  }
}
</script>

<style scoped>
.box {
  position: relative;
  z-index: 2333;
  height: 100vh;
  width: 80vw;
  display: inline;
  float: right ;
}
.loginout{
  width: 400px;
  margin: 18% 20% auto;
  border:2px solid #bed2d2;
}

.loginin{
  margin: auto;
  margin-top: 10px;
  margin-block-end: 10px;
  margin-right: 20px;
}

.button{
  margin-right: 300px;
  margin-top: 10px;
}

</style>
